<!DOCTYPE html>
<html>

<head>
    <base href="{#location.origin#}/res/smartadmin-402/" />
    <meta charset="utf-8">
    <title>
        可用区管理 - 可用区列表 - {#uim.config.app_name#}
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
    <!-- Call App Mode on ios devices -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- Remove Tap Highlight on Windows Phone IE -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- base css -->
    <link rel="stylesheet" media="screen, print" href="css/vendors.bundle.css">
    <link rel="stylesheet" media="screen, print" href="css/app.bundle.css">
    <!-- Optional: page related CSS-->
    <link rel="stylesheet" media="screen, print" href="css/datagrid/datatables/datatables.bundle.css">
    <link rel="stylesheet" media="screen, print" href="css/formplugins/select2/select2.bundle.css">

</head>

<body>
    {#include template="include/page-settings"/#}
    <!-- BEGIN Page Wrapper -->
    <div class="page-wrapper alt">
        <!-- BEGIN Page Content -->
        <!-- the #js-page-content id is needed for some plugins to initialize -->
        <main id="js-page-content" role="main" class="page-content">
            <ol class="breadcrumb page-breadcrumb">
                <li class="breadcrumb-item">可用区管理</li>
                <li class="breadcrumb-item active">可用区列表</li>
            </ol>
            <div class="row">
                <div class="col-xl-12">
                    <div id="panel-1" class="panel">
                        <!-- <div class="panel-hdr">
                            <h2>
                                Example <span class="fw-300"><i>Table</i></span>
                            </h2>
                            <div class="panel-toolbar">
                                <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip"
                                    data-offset="0,10" data-original-title="Collapse"></button>
                                <button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip"
                                    data-offset="0,10" data-original-title="Fullscreen"></button>
                                <button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip"
                                    data-offset="0,10" data-original-title="Close"></button>
                            </div>
                        </div> -->
                        <div class="panel-container show">
                            <div class="panel-content">
                                <!-- datatable start -->
                                <table id="dt-list" class="table table-bordered table-hover table-striped w-100">
                                </table>
                                <!-- datatable end -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <script type="text/html" id="tpl-user-search">
                {#ignore #}
                <div class="col-md-12 d-flex row">
                    <div class="col-sm-12 col-md-2 mb-3">
                        <div class="input-group">
                            <select class="form-control" id="user-search-respool"
                                uim-api="respool.list,respool_list,respool_id,respool_name"
                                uim-api-data="{limit:50}">
                                <option value="">所有资源池</option>
                            </select>
                        </div>
                    </div>
                <!-- </div>
                <div class="col-md-12 d-flex"> -->
                    <div class="col-sm-12 col-md-2 mb-3">
                        <div class="input-group">
                            <input type="search" class="form-control" placeholder="可用区名称、描述" id="user-search-keywords">
                        </div>
                    </div>
                </div>
                {#/ignore#}
            </script>
        </main>
        <!-- END Page Content -->
    </div>
    <!-- END Page Wrapper -->
    <!-- LOST END Quick Menu -->
    {#include template="include/color-profile"/#}
    <script src="js/vendors.bundle.js"></script>
    <script src="js/app.bundle.js"></script>
    <script src="js/datagrid/datatables/datatables.bundle.js"></script>
    <script src="js/datagrid/datatables/datatables.export.js"></script>
    <script src="js/formplugins/select2/select2.bundle.js"></script>

    <script>
        var api_result = null;

        var table_columns = [
            { title: "", data: '', orderable: false, width: 20 },
            { title: "ID", data: "respool_area_id", orderable: false },
            { title: "地区名称", data: "respool_area_name", orderable: false },
            { title: "所属资源池", data: "respool_id", orderable: false },
            { title: "控制台redis", data: "console_redis", orderable: false },
            { title: "创建人", data: "creator", orderable: false },
            { title: "创建时间", data: "create_time", orderable: false },
            { title: "状态", data: "status", orderable: false },
            { title: "描述", data: "description", orderable: false },
            // { title: "操作", data: "", orderable: false },
        ];
        var raw_table = function (request, drawCallback, settings) {
            console.log({ request, drawCallback, settings })
            var order = [];
            $(request.order).each(function () {
                // 后面加冒号表示升序，否则为降序
                order.push(table_columns[this.column].data + (this.dir == 'asc' ? ':' : ''))
            })
            uim.api.emit({
                code: 'respool.area.list',
                deduplication: true,
                data: {
                    page: request.start / request.length + 1,
                    limit: request.length,
                    ext_info: 1,
                    // keywords: request.search.value,
                    respool_id: $('.user-search #user-search-respool').val() * 1,
                    keywords: $('.user-search #user-search-keywords').val(),
                    order: order.join(',')
                },
                success: function (data) {
                    api_result = data;
                    drawCallback({
                        // recordsTotal: 0,
                        recordsFiltered: data.page_info.total,
                        data: data.respool_area_list
                    });
                    parent.updateIframeHeight(view_name);
                },
                error: function (err) {
                    bootbox.alert(err.text, function () {
                        drawCallback({
                            recordsFiltered: 0,
                            data: []
                        });
                    });
                    parent.updateIframeHeight(view_name);
                    return true;
                }
            });
        }
        var table; // dataTables对象

        $(document).ready(function () {
            var init_datatables = function () {

                table = $('#dt-list').DataTable({
                    lengthMenu: [[10, 20, 30, 40, 50], [10, 20, 30, 40, 50]], //分页长度选项,   -1 "全部"
                    bLengthChange: true,
                    // info: false,
                    responsive: true,
                    dom:
                        "<'row mb-3 user-search'><'row mb-3'B>" +
                        "<'row'<'col-sm-12'tr>>" +
                        "<'row'<'col-sm-12 col-md-2'l><'col-sm-12 col-md-3'i><'col-sm-12 col-md-7'p>>",
                    buttons: [
                        {
                            extend: 'selectAll',
                            text: '全选',
                            className: 'btn-outline-secondary btn-sm'
                        },
                        {
                            extend: 'selectNone',
                            text: '取消选择',
                            className: 'btn-outline-secondary btn-sm'
                        },
                        {
                            extend: 'selected',
                            text: '批量操作',
                            className: 'btn-outline-info btn-sm btn-batch'
                        },
                        {
                            text: '添加可用区',
                            titleAttr: '添加可用区',
                            className: 'btn-success shadow-0 btn-sm ml-auto flex-shrink-0 btn-action-create',
                        }

                    ],

                    lengthChange: false,

                    // colReorder: true,
                    orderCellsTop: true,
                    fixedHeader: true,

                    language: datatables_language,
                    initComplete: function () {
                        console.log('initComplete', this)
                    },
                    // data: dataSet,
                    columns: table_columns,
                    processing: true,
                    serverSide: true,
                    ajax: raw_table,// 传入回调函数
                    columnDefs: [
                        {
                            // data: null,
                            orderable: false,
                            className: 'select-checkbox',
                            targets: 0,
                            render: function () {
                                return '';
                            }
                        },
                        {
                            targets: 3,
                            render: function (data, type, full, meta) {
                                return api_result.respool_info ? api_result.respool_info[data].respool_name : '';
                            },
                        },
                        {
                            targets: 4,
                            render: function (data, type, full, meta) {
                                return full.console_redis_host + ':' + full.console_redis_port;
                            },
                        },
                        {
                            targets: 5,
                            render: function (data, type, full, meta) {
                                return api_result.creator_info ? api_result.creator_info[data].real_name : '';
                            },
                        },
                        {
                            targets: 7,
                            render: function (data, type, full, meta) {
                                var package = {
                                    "1":
                                    {
                                        // 'title': '启用',
                                        'class': 'bg-success-500 bg-success-gradient'
                                    },
                                    "2":
                                    {
                                        // 'title': '停用',
                                        'class': 'bg-warning-500 bg-warning-gradient'
                                    },
                                    "3":
                                    {
                                        // 'title': '删除',
                                        // 'class': 'bg-fusion-50',
                                        'class': 'bg-fusion-50 bg-fusion-gradient'
                                    },
                                };
                                return '<div class="has-popover d-flex align-items-center"><span class="d-inline-block rounded-circle mr-2 '
                                    + package[data].class + '" style="width:15px; height:15px;"></span><span>'
                                    + uim.enum.respoolAreaStatus[data] + '</span></div>';
                            },
                        },
                        // {
                        //     targets: -1,
                        //     render: function (data, type, full, meta) {
                        //         return "<div class='d-flex demo'>" +
                        //             "<a href='javascript:void(0);' class='btn btn-sm btn-outline-primary btn-icon btn-inline-block mr-1 btn-action-detail'  title='详情'><i class=\"fal fa-eye\"></i></a>" +
                        //             "<a href='javascript:void(0);' class='btn btn-sm btn-outline-info btn-icon btn-inline-block mr-1 btn-action-update'  title='修改'><i class=\"fal fa-shield-check\" ></i></a>";;

                        //     },
                        // }
                    ],
                    order: [
                        // [3, 'desc'],
                    ],
                    paging: true,
                    // select: true
                    select: {
                        // style: 'os',
                        style: 'multi',
                        selector: 'td:first-child'
                    },
                });
            }

            uim.render({
                data: {},
                template: 'tpl-user-search',
                template_type: 1, // 0默认为模板内容字符串（不支持include），1为标签对象（取innerHTML，其中include时从页面dom.getbyId来取），2为在线模板（include从线上获取）；
                cache: false, // 当template_type=2时有效，将会把在线模板缓存到localStorage
                context: window, // 当template_type=1时有效，用于在当前上下文中寻找dom
                done: function (res) {
                    init_datatables();
                    $('.user-search').append(res.content);
                    $('.user-search select').change(function () {
                        table.draw();
                    }).select2({
                        // minimumResultsForSearch: Infinity,
                        // placeholder: "请选择"
                    });
                    $('.user-search #user-search-keywords').on('input', function () {
                        table.draw();
                    });
                }
            });
            $('body').on('click', '.btn-action-create', function () {
                uim.view('area/create', { data: {} }, window);
            });
        });

    </script>

    {#include template="include/common"/#}

</body>

</html>